<template>
  <div class="login-container">
    <div class="login-header">
     <div class="title">
       <h1>系统登录</h1>
     </div>
    </div>
    <div class="login-form">
      <div class="form-item">
        <label for="username">手机号</label>
        <input type="text" id="username" v-model="username" placeholder="请输入手机号" style="background-color: #f5f5f5;">
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" placeholder="请输入密码" style="background-color: #f5f5f5;">
      </div>
      <button class="login-button" @click="login">登录</button>
      <div class="extra-options">
        <a href="#" style="color: #ff6700;">忘记密码？</a>
        <a href="#" style="color: #ff6700;">快速注册</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      this.$message({
        showClose: true,
        message: '登录成功!',
        type: 'success'
      });
      this.$router.push({name:'home'})
    }
  }
};
</script>

<style scoped>
/* 重置默认样式，避免浏览器默认样式影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.login-container {
  min-height: 100vh; /* 确保容器最小高度为视口高度 */
  max-height: 100vh; /* 让容器高度始终等于视口高度 */
  width: 100%; /* 让容器宽度占满整个视口宽度 */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #ffd000;
  //background-image: url(''); /* 添加纹理 */
  overflow: hidden;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 120px;
  height: auto;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

.login-form {

  background-color: #fff;
  padding: 20px 30px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-item input {
  width: 280px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #ff6700;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 10px;
}

.extra-options {
  text-align: right;
}
</style>
